<template>
  <div class="box">
    <div class="oss_file">
      <input
        type="file"
        class="file-ipt"
        id="fileUpload"
        accept="video/*"
        @change="doUpload($event)"
      />
      <el-button type="primary" class="videoBtn" @click="chooseVideo"
        >开始拍摄</el-button
      >
    </div>
  </div>
</template>

<script>
// import Axios from "axios";
// import OSS from "ali-oss";
import { getOssInfo, postOssFile, postUploadVideoHui} from "../assets/js/api";
import ossConstData from "../assets/js/globData";
import axios from "axios";
export default {
  data() {
    return {
      loading: null,
      id:""
    };
  },
  created() {

    console.log(ossConstData);
    this.id = sessionStorage.getItem("userId");
  },
  methods: {
    chooseVideo() {
      document.getElementById("fileUpload").click(); //触发input-file文件上传控件 tirggerFile
    },
    async doUpload(el) {
      let that = this;
      let ossData = await getOssInfo(this.id);
      if (ossData.code != 200) {
        that.$message.error(ossData.message);
        return;
      }
      that.loading = that.$loading({
        lock: true,
        text: "上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let dataOss = ossData.data;
      let formData = new FormData();
      formData.append("key", dataOss.dir + dataOss.fileName + ".mp4");
      formData.append("OSSAccessKeyId", dataOss.accessid);
      formData.append("policy", dataOss.policy);
      formData.append("Signature", dataOss.signature);
      formData.append("file", el.target.files[0]);
      formData.append("success_action_status", 200);

      let url = ossConstData.url;

      //表头信息
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
          .post(dataOss.host, formData, config)
          .then((res) => {
            that.loading.close();
              let test = document.getElementById("fileUpload");
              test.value = "";
              this.$emit("ossUplodType", true);
              let queryData =  dataOss.fileName+".mp4"+"/"+this.id
              postUploadVideoHui(queryData).then(res => {
                console.log(res)
              })
          })

      // return;
      // postOssFile(url, formData).then(() => {
      //   that.loading.close();
      //   let test = document.getElementById("fileUpload");
      //   test.value = "";
      //   this.$emit("ossUplodType", true);
      //   let queryData =  dataOss.fileName+".mp4"+"/"+this.id
      //   postUploadVideoHui(queryData).then(res => {
      //     console.log(res)
      //   })
      // });
    },
  },
};
</script>

<style scoped lang="less">
.oss_file {
  width: 100%;
  padding: 10% 0;
  margin-bottom: 20px;
  position: relative;
}
// .oss_file input {
//   right: 0;
//   top: 0;
//   opacity: 0;
//   filter: alpha(opacity=0);
//   cursor: pointer;
// }
.videoBtn {
  width: 100%;
  border-radius: 25px;
  position: absolute;
  z-index: 1;
}
.file-ipt {
  position: absolute;
  opacity: 0;
  bottom: 25px;
  text-align: center;
  z-index: 10;
}
</style>
